<script setup>
import FirstTitle from "@comp/FirstTitle";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { onMounted } from "vue";
import { searchDataPzzh } from "@/api/search";
import { addOrUpdatePzzh } from "@/api/addOrUpdate";

const city = window.globalObj.name;
const editorRef = shallowRef();
const toolbarConfig = {};
const editorConfig = {
  placeholder: "请输入内容...",
};
const mode = ref("default");

// 加载html
const initHtml = () => {
  searchDataPzzh({ m: "时机顺序-转换顺序" }).then((res) => {
    const { data } = res;
    valueHtml.value = data.find((x) => x.k === "转换顺序")?.v || "";
  });
};

const handleCreated = (editor) => {
  editorRef.value = editor; // 记录 editor 实例，重要！
};

const valueHtml = ref(
  "1.指挥所转换顺序：下达转换命令、制定下达转换计划、调整维修运行各类保障设施、调整联通指挥通信设备、组织指挥人员进入指定位置、组织指挥所演练、组织指挥所开设验收。<br/>2.专业力量转换顺序：下达预先号令、制定下达专业队扩编计划、动员补充各类专业人员、调整补充专业装备物资器材、组织专业队临战训练、组织专业队扩编检验。<br/>3.人员防护工程转换顺序：制定下达工程转换计划、组织施工单位进场施工、组织工程验收。<br/>4.综合保障转换顺序：制定下达各类保障计划、按计划调整补充各类保障装备物资器材、组织保障转换验收。"
);

const saveProgramme = () => {
  ElMessageBox.confirm(`确定要保存吗?`, "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
    customClass: "message-box",
  }).then(() => {
    addOrUpdatePzzh({
      m: "时机顺序-转换顺序",
      data: [
        {
          k: "转换顺序",
          v: valueHtml.value,
        },
      ],
    })
      .then(() => {
        ElMessage.success("操作成功");
      })
      .catch(() => {});
  });
};

onMounted(() => {
  initHtml();
});
onBeforeUnmount(() => {
  const editor = editorRef.value;
  if (!editor) return;
  editor.destroy();
});
</script>
<template>
  <div class="">
    <FirstTitle name="转换顺序" class="top-15" />
    <div class="top-15">
      按照指挥所、专业力量、人员防护工程（人防工程、掩蔽场所、疏散地域、疏散基地）、综合保障4类工作，采取各类工作平行展开、各级同步有序推进的方式组织实施，也可根据实际需要，分类分批组织实施。各类工作转换的基本顺序如下：
    </div>
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef"
        :defaultConfig="toolbarConfig"
        :mode="mode"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml"
        :defaultConfig="editorConfig"
        :mode="mode"
        @onCreated="handleCreated"
      />
    </div>

    <div class="flex-justify-end top-20">
      <el-button type="primary" class="save-btn" @click="saveProgramme"
        >保存</el-button
      >
    </div>
  </div>
</template>
<style scoped lang="scss"></style>